<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery/jquery-3.4.1.js"></script>
<link href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css" rel="stylesheet" >
<script src="${pageContext.request.contextPath}/resource/bootstrap4/js/bootstrap.js"></script>    
<script src="${pageContext.request.contextPath}/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>    
    

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	 <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
	  	<a class="navbar-brand" href="#">添加商品</a> 
	  </div>
</nav>
	        
<form id="addForm">
  <div class="form-group row">
    <label for="goodsName" class="col-sm-2 col-form-label">商品名称</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="goodsName" name="goodsName">
    </div>
  </div>
  <div class="form-group row">
    <label for="caption" class="col-sm-2 col-form-label">标题</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="caption"  name="caption">
    </div>
  </div>
  <div class="form-group row">
    <label for="brand" class="col-sm-2 col-form-label">品牌</label>
    <div class="col-sm-10">
       <select id="brandId" name="brand.id">
       		<c:forEach var="b" items="${brands}">
       			<option value="${b.id}">${b.name}</option>
       		</c:forEach>
       </select>
    </div>
  </div>
  
  <div class="col-sm-10" id="tree1" style="display:none ;position: absolute; z-index: 1000;width: 90%" >
		
  </div>
  <input type="hidden" name="category.id" id="categoryId">

  
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">分类</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <button type="button" class="btn btn-warning" onclick="showCat()">请选择</button>
        </div>
        <div class="form-check">
          <label class="form-check-label" for="gridRadios2" id="checkedCat">
            		被选中的分类
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  
  <div class="form-group row">
    <div class="col-sm-2">是否上架</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1" name="isMarketable" value="1">
        <label class="form-check-label" for="gridCheck1">
          		上架
        </label>
      </div>
    </div>
  </div>
  
  <div class="form-group row">
    <label for="caption" class="col-sm-2 col-form-label">选择图片</label>
    <div class="col-sm-10">
      <input type="file" class="form-control" id="file"  name="file">
    </div>
  </div>
  
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="button" class="btn btn-primary" onclick="commitData()">提交</button>
    </div>
  </div>
</form>   



<!-- Modal  模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">选择分类</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 具体显示的内容 -->
      <div class="modal-body" id="tree">
        	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">ok</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

 $.post("../category/treeData",function(msgResult){
	if(msgResult.code==0){
		$('#tree').treeview({data: msgResult.data,
			//增加一个点击事件 
			onNodeSelected: function(event, nodeData) {
				$("#checkedCat").text(nodeData.path)
				$("#categoryId").val(nodeData.id)
				// $("#tree").hide()
				$("#staticBackdrop").modal("hide")
			   
			 }
			
		});
		//获取数据成功
	}else{
		//获取树形数据失败的
		alert('获取数据失败')
		
	}
}) 

function commitData(){
	 
	 var formData = new FormData($("#addForm")[0])
	 
	 $.ajax({
		 url:"../spu/add",
		 type:"post",
		 processData:false,
		 contentType:false,
		 data:formData,
		 dataType:"json",
		 success:function(msg){
			 if(msg.code==0){
				 alert("添加成功")
				 $("#workContent").load("../spu/list")
			 }else{
				 alert("添加失败")
			 }
		 }
		 
	 })
	 
 }

function showCat(){
	
	$("#staticBackdrop").modal("show")
 }


</script>